import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:qyou_app/common/api.dart';
import 'package:qyou_app/common/base.dart';
import 'package:qyou_app/common/http.dart';
import 'package:qyou_app/model/user.dart';
import 'package:qyou_app/model/video.dart';
import 'package:qyou_app/widget/search.dart';

class DynamicVideoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _DynamicVideoPageState();
}

class _DynamicVideoPageState extends State<DynamicVideoPage> with Base {
  List<User> users = [];
  List<Video> videos = [];

  void _getUserData() {
    HttpKit().get(Api.user).then((value) {
      var userMap = value.data;
      List<User> userList = (userMap as List<dynamic>)
          .map((e) => User.fromJson((e as Map<String, dynamic>)))
          .toList();
      setState(() {
        users = userList;
      });
    });
  }

  void _getVideoData() {
    HttpKit().get(Api.video + "/1").then((value) {
      var videoMap = value.data;
      List<Video> videoList = (videoMap as List<dynamic>)
          .map((e) => Video.fromJson((e as Map<String, dynamic>)))
          .toList();
      setState(() {
        videos = videoList;
      });
    });
  }

  @override
  void initState() {
    super.initState();
    if (users == null || users.length <= 0) {
      _getUserData();
    }

    if (videos == null || videos.length <= 0) {
      _getVideoData();
    }
  }

  //最常访问
  Widget _lastAccess() {
    return SizedBox(
        height: dp(120),
        child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: users.length,
            itemBuilder: (context, index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    width: dp(70),
                    height: dp(120),
                    padding: EdgeInsets.all(dp(5)),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        ClipRRect(
                          borderRadius: BorderRadius.circular(dp(30)),
                          //child: Image.network(users[index].avatar),
                          child: CachedNetworkImage(
                            imageUrl: users[index].avatar,
                            placeholder: (context, url) => Image.asset(
                              'assets/common/null.png',
                              fit: BoxFit.fill,
                            ),
                          ),
                        ),
                        Padding(padding: EdgeInsets.all(dp(5))),
                        Container(
                            child: Text(
                          users[index].username,
                          style: TextStyle(fontSize: dp(10)),
                          textAlign: TextAlign.center,
                        )),
                      ],
                    ),
                  ),
                ],
              );
            }));
  }

  //视频小块
  Widget _content(index) {
    return Container(
      height: dp(360),
      width: dp(300),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          //补白
          Padding(padding: EdgeInsets.only(top: dp(5))),
          //头像部分
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: dp(10))),
              ClipRRect(
                borderRadius: BorderRadius.circular(dp(30)),
                child: CachedNetworkImage(
                  height: dp(50),
                  width: dp(50),
                  imageUrl: videos[index].avatar,
                  placeholder: (context, url) => Image.asset(
                    'assets/common/null.png',
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(left: dp(10))),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    videos[index].owner,
                    style: TextStyle(
                        color: Base.defaultColor,
                        fontSize: dp(14),
                        fontWeight: FontWeight.bold),
                  ),
                  Padding(padding: EdgeInsets.only(bottom: dp(5))),
                  Text(
                    videos[index].addTime + "  ·  投稿了视频",
                    style:
                        TextStyle(color: Color(0xFF9E9E9E), fontSize: dp(12)),
                  ),
                ],
              ),
            ],
          ),
          //视频部分
          Padding(
            padding: EdgeInsets.all(dp(10)),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(dp(5)),
              child: CachedNetworkImage(
                fit: BoxFit.fitWidth,
                imageUrl: videos[index].pic,
                placeholder: (context, url) => Image.asset(
                  'assets/common/null.png',
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          //标题部分
          Padding(
            padding: EdgeInsets.symmetric(horizontal: dp(10)),
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                videos[index].title,
                style: TextStyle(fontSize: dp(14), fontWeight: FontWeight.bold),
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ),
          Padding(padding: EdgeInsets.only(bottom: dp(10))),
          //点赞转发部分
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(
                width: dp(100),
                child: Row(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Image.asset(
                      "assets/common/send.png",
                      height: dp(24),
                    ),
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Text(
                      videos[index].send.toString(),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: dp(100),
                child: Row(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Image.asset(
                      "assets/common/discuss.png",
                      height: dp(24),
                    ),
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Text(
                      videos[index].view.toString(),
                    ),
                  ],
                ),
              ),
              SizedBox(
                width: dp(100),
                child: Row(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Image.asset(
                      "assets/common/zan.png",
                      height: dp(24),
                    ),
                    Padding(padding: EdgeInsets.only(left: 5)),
                    Text(
                      videos[index].zan.toString(),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Padding(padding: EdgeInsets.symmetric(vertical: dp(5))),
          Divider(
            color: Color(0xFFEEEEEE),
            thickness: dp(10),
          ),
        ],
      ),
    );
  }

  Widget _contentPage() {
    return Column(
      children: <Widget>[
        Expanded(
            child: ListView.builder(
                itemCount: videos.length + 5,
                itemBuilder: (context, index) {
                  print("length: ${videos.length},index: $index");
                  if (index == 0) {
                    return SearchBox().getSearchBox();
                  } else if (index == 1) {
                    return Divider(
                      color: Color(0xFFEEEEEE),
                      thickness: dp(1),
                    );
                  } else if (index == 2) {
                    return Container(
                        height: dp(25),
                        margin: EdgeInsets.all(dp(5)),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "最常访问",
                            style: TextStyle(
                                fontSize: dp(14), fontWeight: FontWeight.bold),
                          ),
                        ));
                  } else if (index == 3) {
                    return _lastAccess();
                  } else if (index == 4) {
                    return Divider(
                      color: Color(0xFFEEEEEE),
                      thickness: dp(10),
                    );
                  } else {
                    return _content(index - 5);
                  }
                })),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _contentPage(),
    );
  }
}
